<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>答题</title>
    <!--<title>问题联系：ysq8888520</title>-->

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">


    <link rel="stylesheet" href="../assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../assets/js/layui/css/layui.css">
    <link rel="stylesheet" href="../assets/css/global.css">

    <!--弹出层公共样式-->
    <link rel="stylesheet" href="../assets/css/popup.css">
    <link rel="stylesheet" href="../assets/css/answer.css">

</head>
<body>

<div id="index_div">
    <!--背景图-->
    <div class="app-bg"></div>

    <!--主显示区-->
    <div class="app-main">

        <!--发布者信息-->
        <div class="answer-info-box">
            <div class="answer-info ">
                <div class="answer-info-head am-text-center " v-cloak>
                    <img :src="challenge_detail.avatar" width="65" alt="" height="65">
                    <span class="answer-info-name ">{{challenge_detail.nickname}}的挑战</span>
                    <!--挑战已撤回-->
                    <!--赏金已被领取-->
                    <span class="answer-info-num margintop10" v-if="challenge_detail.status==0">答对{{challenge_detail.topic_number}}道题挑战成功即可领走奖励哦</span>
                    <span class="answer-info-num margintop10" v-if="challenge_detail.status==1">其他人正在挑战中</span>
                    <span class="answer-info-num margintop10" v-if="challenge_detail.status==2">挑战已撤回</span>
                    <span class="answer-info-num margintop10" v-if="challenge_detail.status==3">赏金已被领取</span>
                    <span class="answer-info-money margintop10">￥{{challenge_detail.money | integral}}</span>
                    <span class="pop-up-btn margintop10" id="start_answer"
                          v-if="challenge_detail.status==0||challenge_detail.status==1"
                          @click="onStartAnswer" >开始答题</span>

                    <a href="index.html"><span class="go-square-btn"
                                               v-if="challenge_detail.status==2||challenge_detail.status==3">挑战广场</span></a>
                    <a href="challenge.html"><span class="go-send-challenge-btn"
                                                   v-if="challenge_detail.status==2||challenge_detail.status==3">发起挑战</span></a>
                </div>
            </div>
        </div>
        <!--发布者信息End-->

        <div class="answer-poster-box am-text-center">
            <span id="poster" @click="onShowPoster">生成邀请海报</span>
        </div>


        <!--答题记录-->
        <div class="answer-record-box">
            <div class="answer-record-title am-text-center">
                <span>-好友答题记录-</span>
            </div>

            <!--无答题记录-->
            <div class="answer-record-no-wrap am-text-center" v-if="total_record==0" v-cloak>
                <img src="../images/answer_record_no.png" width="145" alt="">
                <span class="answer-record-no-title">暂无好友挑战答题，邀请好友参与挑战吧</span>
                <span class="share-challenge-btn" @click="onShadeChallenge">分享挑战</span>
            </div>
            <!--无答题记录End-->

            <!--有答题记录-->
            <div class="answer-record-yes-wrap " v-if="total_record!=0" v-cloak>

                <!--答题记录单项-->
                <div class="answer-record-item" v-for="answer_log in answer_log_list">
                    <img :src="answer_log.avatar" width="34" height="34" alt="">
                    <div class="answer-record-info">
                        <span class="answer-record-info-name">{{answer_log.nickname}}</span>
                        <span class="answer-record-info-time">{{answer_log.create_time | timestampToTime}}</span>
                    </div>
                    <div class="answer-record-num" v-if="answer_log.is_all_right==0">
                        <span class="answer-record-num-yes">答对了{{answer_log.right_num}}道题！</span>
                        <span class="answer-record-num-no">仅差{{answer_log.topic_num-answer_log.right_num}}道</span>
                    </div>

                    <div class="answer-record-num" v-if="answer_log.is_all_right==1">
                        <span class="answer-record-num-yes">智商超群全都答对了！</span>
                        <span class="answer-record-num-no">成功领取{{challenge_detail.money | integral}}元奖励</span>
                    </div>
                </div>
                <!--答题记录单项End-->

            </div>
            <!--有答题记录End-->
        </div>
        <!--答题记录End-->
    </div>
    <!--主显示区End-->

    <!--底部导航栏-->
    <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default"
         id="">
        <ul class="am-navbar-nav am-cf am-avg-sm-4">
            <li>
                <a href="index.html">
                    <img src="../assets/i/square.png" alt="挑战广场"/>
                    <span class="am-navbar-label ">挑战广场</span>
                </a>
            </li>
            <li>
                <a href="challenge.html">
                    <img src="../assets/i/trophy.png" alt="发起挑战"/>
                    <span class="am-navbar-label">发起挑战</span>
                </a>
            </li>
            <li>
                <a href="user.html">
                    <img src="../assets/i/user.png" alt="个人中心"/>
                    <span class="am-navbar-label">个人中心</span>
                </a>
            </li>
        </ul>
    </div>
    <!--底部导航栏End-->

    <div class="pop-up-box" id="start-answer-pop-up" @click="onClosePopupVue">
        <div class="withdrawal-box" @click.stop.prevent>
            <div class="close-box" onclick="onClosePopup(this)">
                <img src="../assets/i/close.png" width="14" alt="">
            </div>
            <div class="withdrawal-content-box am-text-center">
                <img src="../images/popUp/start_answer.png" width="74" alt="">
                <span class="pop-up-title margintop25">支付{{challenge_detail.answer_money | integral}}元开始答题</span>
                <span style="color: #F00;">(优先扣除挑战卡)</span>

                <br><span class="pop-up-btn margintop25" @click="onConfirmPay">确认支付</span>
            </div>
        </div>
    </div>

    <div class="pop-up-box" id="poster-pop-up" @click="onClosePopupVue">
        <div class="poster-box am-text-center" @click.stop.prevent>
            <div class="close-box" onclick="onClosePopup(this)">
                <img src="../assets/i/close_white.png" width="14" alt="">
            </div>
            <div class="poster-hide-box">
                <!--<img :src="challenge_detail.avatar" width="65" alt="" class="poster-head" id="hd"><br>-->
                <img :src="challenge_detail.avatar" width="65"  height="65" alt="" class="poster-head" id="hd" style="opacity:0;"><br>
                <div class="poster-ercode"></div>
            </div>
            <img src=""  id="poster_img" >
        </div>

        <div class="pop-up-bottom am-text-center">
            <div>长按图片，保存到相册后分享给好友或朋友圈</div>
        </div>
    </div>

    <div class="pop-up-box" id="shade_challenge" @click="onClosePopupVue">
        <div class="shade-box">
            <img src="../images/shade_challenge_top.png" alt="" width="75%">
        </div>

    </div>
</div>


<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/layui/layui.js"></script>
<script src="../assets/js/global.js"></script>
<script src="../assets/js/vue.js"></script>
<script src="../assets/js/jquery.qrcode.min.js"></script>


<!--生成图片-->

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!--页面内js-->
<script src="../assets/js/frontend/answer.js"></script>

<script>
    //调用微信JS api 支付
    function jsApiCall()
    {
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                    "appId": jsApiParameters.appId,
                    "nonceStr":jsApiParameters.nonceStr,
                    "package": jsApiParameters.package,
                    "paySign":jsApiParameters.paySign,
                    "signType": jsApiParameters.signType,
                    "timeStamp": jsApiParameters.timeStamp
                },
                function(res){
                    WeixinJSBridge.log(res.err_msg);
//                    alert(res.err_code+res.err_desc+res.err_msg);
                    console.info(res.return_code);
//                    alert(res.err_msg);
                    if(res.err_msg == "get_brand_wcpay_request:ok"){
                        setTimeout(function(){
//                            window.location.replace();
                            window.location.href = '/pages/time.html?answer_log_id=' + answer_log_id+'&challenge_id='+challenge_id;
                        },500);
//                        window.location.href = ;
                    }else {
                        flag = true;
                    }
                }
        );
    }

    function docallpay()
    {
        if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
        }else{
            jsApiCall();
        }
    }

    function startJsSDK(){
        /**
         * 配置JS-SDK
         */
        wx.config({
            "debug": false,
            "beta": false,
            'appId': js_config.appId,
            'timestamp': js_config.timestamp,
            'nonceStr': js_config.noncestr,
            'signature': js_config.signature,
            "jsApiList": ["onMenuShareAppMessage", "onMenuShareTimeline"]
        });

        /**
         * 分享
         */
        wx.ready(function () {
            wx.onMenuShareAppMessage({
                title: '你的好友向你发起了智商挑战',
                desc: '应不应战，奖金就在那里~',
                link: js_config.host+"/pages/answer.html?id="+challenge_id,
                imgUrl: js_config.host+'/images/shade_logo.png',
                success: function (res) {
                    console.log(res);
                },
                cancel: function (resq) {
                    // 用户取消分享后执行的回调函数
                    console.log(resq);

                }
            });
            wx.onMenuShareTimeline({
                title: '你的好友向你发起了智商挑战',
                desc: '应不应战，奖金就在那里~',
                link: js_config.host+"/pages/answer.html?id="+challenge_id,
                imgUrl:js_config.host+'/images/shade_logo.png',
                success: function (res) {
                    console.log(res);
                },
                cancel: function (resq) {
                    // 用户取消分享后执行的回调函数
                    console.log(resq);

                }
            });
        });

    }
</script>
</body>
</html>
